<template>
  <div class="tools-div">
    <el-button type="success" size="small" @click="addShow">添 加</el-button>
  </div>
  <!--数据展示-->
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="specName" label="规格名称" />
    <el-table-column label="规格值" #default="scope">
      <div
        v-for="(item1, index1) in scope.row.specValue"
        :key="index1"
        style="padding: 5px; margin: 0;width: 100%;"
      >
        {{ item1.key }}:
        <span
          v-for="(item2, index2) in item1.valueList"
          :key="index2"
          class="div-atrr"
        >
          {{ item2 }}
        </span>
      </div>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="操作" align="center" width="200" #default="scope">
      <el-button type="primary" size="small" @click="editShow(scope.row)">
        修改
      </el-button>
      <el-button type="danger" size="small" @click="remove(scope.row.id)">
        删除
      </el-button>
    </el-table-column>
  </el-table>
  <!--分页页码-->
  <el-pagination
    v-model:current-page="pageParams.page"
    v-model:page-size="pageParams.limit"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <!--添加和修改表单-->
  <el-dialog v-model="dialogVisible" :title="title" width="40%">
    <el-form label-width="120px">
      <el-form-item label="规格名称">
        <el-input v-model="productSpec.specName" />
      </el-form-item>
      <el-form-item>
        <el-button size="default" type="success" @click="addSpec">
          添加新规格
        </el-button>
      </el-form-item>
      <el-form-item
        label=""
        v-for="(item, index) in productSpec.specValue"
        :key="index"
      >
        <el-row>
          <el-col :span="10">
            <el-input
              v-model="item.key"
              placeholder="规格"
              style="width: 90%;"
            />
          </el-col>
          <el-col :span="10">
            <el-input
              v-model="item.valueList"
              placeholder="规格值(如:白色,红色)"
              style="width: 90%;"
            />
          </el-col>
          <el-col :span="4">
            <el-button size="default" type="danger" @click="delSpec(index)">
              删除
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item align="right">
        <el-button type="primary" @click="saveOrUpdate">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  getPageAPI,
  postSaveAPI,
  deleteAPI,
  putUpdateAPI,
} from '@/api/productSpec.js'
import { ElMessage, ElMessageBox } from 'element-plus'

//=========================查询==========================================
// 表格数据模型
const list = ref([])
//表单标题
const title = ref('')
// 分页条数据模型
const total = ref(0)

//分页条数据模型
const pageParamsForm = {
  page: 1, // 页码
  limit: 10, // 每页记录数
}
const pageParams = ref(pageParamsForm)

// 定义数据模型
const dialogVisible = ref(false)
//================调用后端查询接口==========================
const getPageData = async () => {
  const { code, data, message } = await getPageAPI(
    pageParams.value.page,
    pageParams.value.limit
  )
  //后端响应数据格式[{"key":"颜色","valueList":["白色","红色","黑色"]},{"key":"内存","valueList":["8G","18G"]}]
  data.list.forEach(item => {
    item.specValue = JSON.parse(item.specValue) // 将规格字符串转换成规格js对象
  })
  list.value = data.list
  total.value = data.total
}
// 分页改变时触发
const handleSizeChange = size => {
  pageParams.value.limit = size
  getPageData()
}
const handleCurrentChange = page => {
  pageParams.value.page = page
  getPageData()
}

onMounted(() => {
  getPageData()
})
//======================添加商品规格======================================
// 添加表单数据模型
const defaultForm = {
  id: '',
  specName: '',
  specValue: [
    //   {
    //     key: '颜色',
    //     valueList: ['白色', '红色', '黑色'],
    //   },
    //   {
    //     key: '内存',
    //     valueList: ['8G', '18G'],
    //   },
  ],
}
const productSpec = ref(defaultForm)
//添加新规格按钮事件
const addSpec = () => {
  productSpec.value.specValue.push({ key: '', valueList: [] }) // 添加空规格
}
//删除指定的规格项
const delSpec = index => {
  productSpec.value.specValue.splice(index, 1)
}

//进入添加表单
const addShow = () => {
  productSpec.value = { id: '', specName: '', specValue: [] } // 确保是一个完整的对象
  title.value = '添加表单'
  dialogVisible.value = true
}
const saveData = async () => {
  // 确保 valueList 是数组，如果不是数组则通过逗号分隔字符串转换成数组
  productSpec.value.specValue = productSpec.value.specValue.map(item => {
    if (typeof item.valueList === 'string') {
      item.valueList = item.valueList.split(',').map(value => value.trim())
    }
    return item
  })
  // 将 specValue 转换为 JSON 字符串
  const dataToSend = {
    ...productSpec.value,
    specValue: JSON.stringify(productSpec.value.specValue),
  }
  const { code, data, message } = await postSaveAPI(dataToSend)
  if (code === 200) {
    ElMessage.success('添加数据成功!')
    dialogVisible.value = false
    getPageData()
  }
}

//调用接口
const saveOrUpdate = async () => {
  if (!productSpec.value.id) {
    //添加商品规格
    saveData()
  } else {
    //修改商品规格
    updateData()
  }
}
//======================修改商品规格================================
const editShow = row => {
  title.value = '修改表单'
  productSpec.value = { ...row }
  dialogVisible.value = true
}
const updateData = async () => {
  //JSON.stringify(productSpec.value)：
  //这个方法将 productSpec.value 对象转换为 JSON 字符串。它会遍历对象并把对象的所有属性和子属性转换为字符串表示。
  //需要注意的是，JSON.stringify 只能处理可以被转换为 JSON 的对象（即不能有 undefined、函数或循环引用等）。
  // 如果对象包含这些内容，它会抛出错误或者无法正常转换。

  //JSON.parse(...)：
  // JSON.parse 将 JSON 字符串解析回一个新的 JavaScript 对象。
  // 这个方法会创建一个全新的对象，它与原始对象没有任何引用关系，也就是说，新对象和原始对象是完全独立的。
  // 需要将productSpec.value.specValue转换成json字符串提交到后端，通过clone一个新的对象进行实现
  const productSpecClone = JSON.parse(JSON.stringify(productSpec.value))
  // 将productSpecClone.specValue.valueList转换成数组，因为后端需要的数组格式的数据[{"key":"内存","valueList":["8G","18G","32G"]}]
  // v-model绑定的数据模型为字符串
  productSpecClone.specValue.forEach(item => {
    console.log(typeof item.valueList)
    if (typeof item.valueList === 'string') {
      // 针对规格数据修改完毕以后数据类型有可能会变成string，针对string类型的数据将其转换成数组
      item.valueList = item.valueList.split(',')
    }
  })
  //转换为json字符串
  productSpecClone.specValue = JSON.stringify(productSpecClone.specValue)
  //调用接口
  const { code, data, message } = await putUpdateAPI(productSpecClone)
  if (code === 200) {
    ElMessage.success('修改数据成功!')
    dialogVisible.value = false
    getPageData()
  }
}
//=========================删除商品规格=============================
const remove = row => {
  //调用后台接口
  ElMessageBox.confirm('是否确定删除?', '删除弹窗', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const { code } = await deleteAPI(row)
    if (code === 200) {
      ElMessage.success('删除成功!')
      pageParams.value.page = 1
      getPageData()
    }
  })
}
</script>

<style scoped>
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.div-atrr {
  padding: 5px 10px;
  margin: 0 10px;
  background-color: powderblue;
  border-radius: 10px;
}
</style>
